<template>
  <view style="width: 92%;margin: 30rpx auto ;">
    <view style="width: 100%;overflow: hidden;" class="box">
      <view
        v-for="(item,index) in list"
        :key="index"
        style="margin-bottom: 20rpx;border-radius: 20rpx;width: 48%;float: left;"
        @click="dibu(index)"
        :class="index==tabindex?'active':'a'"
      >
        <view style="line-height: 80rpx;font-size: 30rpx;font-weight: 600;letter-spacing: 3px;height: 80rpx;text-align: center;">{{item.title}}</view>
      </view>
    </view>
    <view
      @click="xia"
      style="width: 100%;height:80rpx;line-height: 80rpx;border-radius: 40rpx;color: #FFFFFF;text-align: center;font-size: 28rpx;background-color: #1fb0ac;margin-top: 100rpx;"
    >下一步</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabindex: -1,
      list: [],
      is_child: '',
      type: ''
    }
  },
  onLoad(option) {
    this.type = option.id
    this.qiye()
  },
  methods: {
    // 企业匪类
    qiye: function () {
      this.post('api/firm_data/special_type', '', true).then(res => {
        console.log(res)
        if (res.code == 1) {
          this.list = res.data
        }
      })
    },
    dibu: function (index) {
      this.tabindex = index
      this.is_child = this.list[index].is_child
    },
    xia: function () {
      if (this.tabindex == -1) {
        uni.showToast({
          title: '请选择服务企业类型',
          icon: "none",
          duration: 1000
        })
      } else {
        uni.navigateTo({
          url: this.list[this.tabindex].page_path + '&type=' + this.type
        })
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f5f5f5 !important;
  font-family: Demibold;
}
.active {
  color: #fff;
  background-color: rgb(31, 176, 172);
  border-color: rgb(31, 176, 172);
}
.a {
  border: 1rpx solid #ddd;
}
.box > view:nth-child(2n + 1) {
  margin-right: 10rpx;
}
</style>
